<template>
  <m-container class="out-work-detail">
    <out-work-top-cell :info="info" />

    <m-cell-group weight="label" size="sm" :border="false">
      <m-cell label="出库单信息" size="xs" />
      <view class="box" style="margin-top: -15rpx">
        <view class="item">
          <text class="title">出库单编号</text>
          <text>{{ info.outOrderCode }}</text>
        </view>
        <view class="item">
          <text class="title">主题</text>
          <text>{{ info.theme }}</text>
        </view>
        <view class="df aic jcsb">
          <view class="item">
            <text class="title">申请人</text>
            <text>{{ userList.map[info.operName] }}</text>
          </view>
          <view class="item">
            <text class="title">审核人</text>
            <text>{{ userList.map[info.auditName] }}</text>
          </view>
        </view>
        <view class="df aic jcsb">
          <view class="item">
            <text class="title">出库类型</text>
            <text>{{ dicts['out_order_source_type'].map[info.sourceType] }}</text>
          </view>
          <view class="item">
            <text class="title">项目</text>
            <text>无</text>
          </view>
        </view>
        <view class="item">
          <text class="title">租户</text>
          <text>{{ enterList.map[info.tenantId] }}</text>
        </view>
        <view class="item">
          <text class="title">备注</text>
          <text>{{ info.summary }}</text>
        </view>
      </view>
    </m-cell-group>

    <m-cell-group weight="label" size="sm" :border="false">
      <m-cell label="出库单明细" size="xs" />
      <template v-if="[1, 0].includes(info.status)">
        <view
          class="box"
          style="background: #f3f8fb; margin: 0 20rpx 20rpx"
          v-for="(item, index) in info.imsStockOutOrderDetailList"
          :key="index"
        >
          <view class="h1">出库明细{{ index + 1 }}</view>
          <view class="item">
            <text class="title">SKU名称</text>
            <text>{{ item.skuName }}</text>
          </view>
          <view class="item">
            <text class="title">SKU编号</text>
            <text>{{ skuList.map[item.skuId] }}</text>
          </view>
          <view class="item">
            <text class="title">零件图号</text>
            <text>{{ item.skuPartNo }}</text>
          </view>
          <view class="item">
            <text class="title">包装数量</text>
            <text>{{ item.packageNumber }}</text>
          </view>

          <view class="df aic jcsb">
            <view class="item">
              <text class="title" style="width: 180rpx">出库方式</text>
              <text>{{ outStyle[item.roundOut] }}</text>
            </view>
            <view class="item">
              <text class="title" style="width: 180rpx">出库总数（个）</text>
              <text>{{ item.skuQuantity }}</text>
            </view>
          </view>
          <view class="df aic jcsb" v-if="item.roundOut === 0">
            <view class="item">
              <text class="title" style="width: 180rpx">整出数量（包）</text>
              <text>{{ item.roundOutQuantity / item.packageNumber }}</text>
            </view>
            <view class="item">
              <text class="title" style="width: 180rpx">零出数量（个）</text>
              <text>{{ item.skuQuantity - (item.roundOut === 0 ? item.roundOutQuantity : 0) }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <template v-if="list.length">
          <view class="box" v-for="(item, index) in list" :key="item.outWorkId">
            <m-tag>任务{{ index + 1 }}：{{ item.outWorkId }}</m-tag>
            <view class="df aic jcsb">
              <view class="item">
                <text class="title" style="width: 130rpx">出库库位</text>
                <text>{{ item.stackNo + '-' + item.levelNo + '-' + item.locationNo }}</text>
              </view>
              <view class="item" style="min-width: 400rpx">
                <text class="title" style="width: 120rpx">托盘编号</text>
                <text>{{ item.palletCode }}</text>
              </view>
            </view>
            <view class="over">
              <template v-for="(it, index) in item.imsStockOutWorkDetailList">
                <view
                  class="item df aic"
                  style="background-color: #f2f7fd; margin: 20rpx 0; padding-bottom: 16rpx"
                  :key="it.id"
                >
                  <image src="@/static/icon9.png" mode="scaleToFill" class="icon_box" />
                  <view class="right">
                    <view class="item">
                      <text class="title" style="width: 180rpx">零件图号</text>
                      <text>{{ it.partNo }}</text>
                    </view>
                    <view class="item">
                      <text class="title" style="width: 180rpx">出库数量（个）</text>
                      <text>{{ it.packageQuantity }}</text>
                    </view>
                  </view>
                </view>
                <in-work-code
                  broder
                  :modal="{ barcode: i.skuBarcode }"
                  v-for="(i, index) in it.palletCodeSkuList"
                  :key="i.id"
                  :status-type="outTaskCodeStatus[i.status].color || 'primary'"
                  :status-txt="outTaskCodeStatus[i.status].text || '未入库'"
                />
              </template>
            </view>
          </view>
        </template>
        <view v-else style="min-height: 25vh">
          <m-empty :margin-top="40" />
        </view>
      </template>
      <view style="height: 2rpx"></view>
    </m-cell-group>

    <m-fixed v-if="info.status === 1">
      <m-button width="100%" size="xl" @click="handleClickConfirm"> 开始出库 </m-button>
    </m-fixed>
  </m-container>
</template>

<script>
import { outStyle, outTaskCodeStatus } from '@/utils/constant'
import { router } from '@/router'
import { getOutOrder, getOutOrderHistory, imsStockOutWork, imsStockOutWorkHistory } from '@/api/modules/out-work'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      info: {
        imsStockOutOrderDetailList: [],
      },
      outStyle,
      outTaskCodeStatus,
      list: [],
    }
  },
  computed: {
    ...mapState({
      userList: (state) => state.cache.userList,
      dicts: (state) => state.outWork.dicts,
      enterList: (state) => state.cache.enterList,
      skuList: (state) => state.cache.skuList,
    }),
  },
  async onLoad(options) {
    if ([1].includes(+options.isHistory)) {
      const rows = await imsStockOutWorkHistory({ outOrderId: options.id, barCodeStatus: 6 })
      this.list = rows.map((item) => ({ ...item, imsStockOutWorkDetailList: item.imsStockOutWorkDetailHistoryList }))

      const { data } = await getOutOrderHistory(options.id)
      this.info = data
      return
    }

    const { rows } = await imsStockOutWork({ outOrderId: options.id, barCodeStatus: 6 })
    this.list = rows
    const { data } = await getOutOrder(options.id)
    this.info = data
  },
  methods: {
    handleClickConfirm() {
      router.replace({
        name: 'startOutWork',
        params: {
          id: this.info.outOrderId,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.out-work-detail {
  .box {
    padding: 0 0 25rpx;
    .h1 {
      height: 68rpx;
      line-height: 68rpx;
      background: #d4effb;
      border-radius: 12rpx 12rpx 0px 0px;
      color: #386c85;
      font-size: 30rpx;
      padding-left: 23rpx;
    }
    .item {
      display: flex;
      color: #333;
      font-size: 30rpx;
      padding: 15rpx 20rpx 0rpx;
      flex: 1;
      .title {
        color: #748da7;
        width: 160rpx;
        font-size: 26rpx;
      }
    }
    .footer {
      border-top: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-around;
      margin-top: 20rpx;
      padding-top: 20rpx;
    }
  }
  .over {
    max-height: 650rpx;
    overflow: auto;
    margin: 0 20rpx;
    .icon_box {
      width: 86rpx;
      height: 86rpx;
      margin-right: 10rpx;
    }
  }
}
</style>
